還講到 debug 快笑死 XD

讓我們切入今天的正題 ref 不然要寫不完了

定義

ref 是 Vue 3 中的一個組合式 API，負責綁定和管理「響應式狀態」。

什麼是響應式？

「資料變，UI 也跟著變」。

就是這麼直觀！

用量體重來比喻的話～

今天早上的 ++ 站上體重機，螢幕顯示 99.1。
今天晚上的 ++ 站上體重機，螢幕顯示 99.9。（再不去 HIIT 真的要三高了）

當體重改變，螢幕顯示的數字就會跟著改變。
這好像有點廢話，但大家是否依稀記得，在寫原生 JS 的時候⋯⋯更新 DOM 需要手動操作呢⋯⋯

Vue 的響應式用法就是來幫我們減輕這些負擔的哦！

具體行為

1. 響應式綁定一個值：ref 可以將一個「值」（如數字、字串、物件等）包裝起來，提供這個值的響應用法。
2. 影響 UI 呈現：Vue 會自動追蹤這個值的變化。
   當值發生改變，相關的 UI 元素會自動更新，於畫面呈現最新狀態。

這邊要提到官方文件解釋「為什麼要使用 ref？」，我看了覺得驚呼原來如此的說明：

這是通過一個基於依賴追蹤的響應式系統實現的。當一個組件首次渲染時，Vue 會追蹤在渲染過程中使用的每一個 ref。然後，當一個 ref 被修改時，它會觸發追蹤它的組件的一次重新渲染。

竟然講到「依賴追蹤、重新渲染」，好酷⋯⋯我們來看看它到底怎麼實現ㄉ！

語法

ref();

括號內可定義「值」，也就是你要請 ref 追蹤的參數。

範例一

我們這邊先用簡單的「數字型別」來綁綁看！

當我們這樣定義：

<script setup>
  import { ref } from 'vue';
  
  const count = ref(0);
</script>

以上範例做了什麼事：

1. 響應式綁定一個值：ref(0) 將初始值設為 0，並將其綁定在 count 變數上。
2. 影響 UI 呈現：ref 負責追蹤參數值，當這個值改變，與它相關的任何元素都會自動重新渲染，以顯示最新的值。

真的有綁定到嗎？我們印出來看看：

<script setup>
  import { ref } from 'vue';
  
  const count = ref(0);
  console.log(count);
</script>

我們在瀏覽器上卻印出了這東東：

return 一個物件？

沒錯！當我們透過 ref 去綁定一個值的時候，它將會 reutrn 一個 RefImpl 物件，其中將存放著綁定的這個物件的狀態，而其中：

• _value：是 ref 存放「目前值」的地方。
• value：是物件提供的「屬性」，可以供存取目前的值。

因此，我們可用 .value 這樣的方式來拿到實際的值！

<script setup>
  import { ref } from 'vue';
	
  const count = ref(0);
  console.log(count.value);
</script>

那如果更動值呢？

<script setup>
import { ref } from "vue";

const count = ref(0);
++count.value; // 先將 count+1
console.log(count); // 印出 RefImpl 物件
</script>

RefImpl 物件也是沒在跟你偷懶！

執行 ++count.value; 將 count+1 後，RefImpl 物件中存放的值就跟著變成 1 囉！

ref 應該可以想成⋯⋯是一個「管理響應式狀態的包裝器」，將你要響應式綁定的東西的狀態存到 RefImpl 這個物件中管理，並提供屬性給你存取值。

模板中自動解包的 ref

上述範例我們是在 <script> 中，使用 ref 包裝好的物件去存取值，而 Vue 很貼心的讓使用者在要渲染 UI、也就是要在 <template> 操作這個 RefImpl 物件的 _value 的時候，幫我們「自動解包」。

解包？
也就是說：我們可以直接使用物件中的屬性值，不用再用 .value 這個方式去存取啦！

範例二

我們可以試試看這樣做：

<script setup>
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

在 <template> 中，Vue 會自動解包 ref 的物件，所以不需要寫成 count.value，可以直接透過 count 去取值。
count++、{{ count }} 都是解包後的寫法喔！

小結

竟然有上下篇嗎！（沒有錯，配速就是很重要）

今天的兩個範例 ref 都是綁定了數字，明天我們來試探看看將它綁定「物件」會怎麼樣，然後也來說說為什麼要用它！

範例 code ⬇️

https://github.com/Jamixcs/2024iThome-jamixcs/tree/main/src/components/day11

參考文件

• 官方文件